<template>
  <Card>
    <p slot="title">项目分类列表</p>
    <div class="search-con search-con-top">
      <Button slot="extra" @click="showDrawer(false)" type="primary">添加分类</Button>
      名称：
      <Input v-model="searchData.goods_name" style="width: 200px"></Input>
      <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
      <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>

    </div>
    <br>
    <Table :columns="columns" :data="list" border>
      <template slot-scope="{ row , index}" slot="memberSlot">
        <i-button type="primary" class="inputMaxWidth" @click="showDrawer(row)">编辑</i-button>
        <Button type="error" class="inputMaxWidth" @click="del(row.id)">删除</Button>
      </template>
    </Table>
    <br>
    <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
    </Page>
    <Drawer title="添加" :closable="false" width="40" v-model="showAdd">
      <Form ref="formValidate" :model="itemInfo" :label-width="100">
        <FormItem label="所属分类">
          <!-- <Select v-model="itemInfo.pid" filterable>
                        <Option v-for="item in cateList" :value="item.id" :key="item.id">{{ item.title }}</Option>
                    </Select> -->
            <treeselect v-model="itemInfo.pid"
            :options="deptList"
            :normalizer="normalizer"
            :multiple="false"
            :clearOnSelect="true"
            :closeOnSelect="true"
            :disable-branch-nodes="false"
            :clear-on-select="true"
            :flat="true"
            :show-count="true"
            placeholder="请选择"/>
        </FormItem>
        <FormItem label="分类名称">
          <Input v-model="itemInfo.title" placeholder="分类名称"></Input>
        </FormItem>
        <FormItem label="缩略图" prop="goods_icon" class="item">
          <Upload ref="upload" name="image" :action="action_url" :show-upload-list="false" :headers="header"
            :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError" :on-success="handleSuccess">
            <Button icon="ios-cloud-upload-outline">点击上传</Button>
          </Upload>
        </FormItem>
        <FormItem class="item">
          <img :src="baseImgeUrl + itemInfo.img" style="width: 200px;height: 200px;" v-show="itemInfo.img != ''">
        </FormItem>
        <FormItem label="排序值">
          <Input v-model="itemInfo.sort" placeholder="从大到小排序" type="number"></Input>
          <Alert type="error">排序值越大 显示在最前边</Alert>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submit">提交</Button>
        </FormItem>
      </Form>
    </Drawer>
  </Card>
</template>

<script>
  import config from "@/config";
  import {
    getToken
  } from "../../libs/util";
  const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
  const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;

  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import {
    getTreeSelectData
  } from '@/api/data'

  export default {
    name: "configCategory",
    components: {
      Treeselect
    },

    data() {
      return {
        deptList: [],
        deptIds: '',

        baseImgeUrl: baseImgeUrl,
        action_url: baseUrl + "/admin/image/uploadImg",
        header: {
          token: getToken()
        },
        imgUrl: '',
        // 列表
        columns: [{
            title: 'ID',
            align: "center",
            key: 'id',
          },
          {
            title: '图片',
            align: "center",
            key: 'goods_img',
            render: (h, param) => {
              return h("img", {
                attrs: {
                  src: baseImgeUrl + param.row.img
                },
                style: {
                  width: '80px',
                  height: '60px'
                }
              });
            }
          },
          {
            title: '名称',
            align: "center",
            key: 'title',
          },
          {
            title: '上级分类',
            align: "center",
            key: 'ptitle',
          },
          {
            title: '排序值',
            align: "center",
            key: 'sort',
          },
          {
            title: '创建时间',
            align: "center",
            key: 'create_time',
          },
          {
            title: '操作',
            align: "center",
            key: 'make',
            slot: 'memberSlot',
            minWidth: 100,
          },
        ],
        // 数据
        list: [],
        total: 0,
        searchData: {
          page: 1,
          limit: 10,

        },
        showAdd: false,
        // 管理信息
        itemInfo: {
          id: 0,
          pid: 0,
          title: "",
          img: "",
          sort: 0
        },
      }
    },
    methods: {
      getList() {
        const param = {
          ...this.searchData
        };
        this.$axios('/admin/category/getList', param).then(res => {
          this.list = res.data;
          this.total = res.total;
        });
      },
      search() {
        this.searchData.page = 1;
        this.getList();
      },
      reset() {
        this.searchData = {
          page: 1,
          limit: 10,
        };
        this.getList();
      },
      changePage(page) {
        this.searchData.page = page;
        this.getList();
      },
      changeSize(size) {
        this.searchData.limit = size;
        this.getList();
      },
      // 显示添加角色弹窗
      // showDrawer(row) {
      //     this.showAdd = true;
      //     this.getCategoryArr();
      //     if (row) {
      //         this.itemInfo = row;
      //     } else {
      //         this.itemInfo.img = "";
      //     }
      // },
      showDrawer(row) {
        this.getCategoryArr();
        if (row) {
          this.itemInfo = row;
        } else {
          this.itemInfo = {
            id: 0,
            img: "",
            pid: null,
            ptitle: "顶级分类",
            sort: 0,
            status: 0,
          }
        }
        this.showAdd = true;
      },
      // 添加角色
      submit() {
        this.$axios('/admin/category/save', this.itemInfo).then(res => {
          this.$Message.success('保存成功');
          this.showAdd = false;
          this.getList();
        })
      },
      handleSuccess(res, file) {
        //this.itemInfo.img = res.data;
        this.itemInfo.img = res.data.src;
      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: "文件格式错误",
          desc: "不支持该文件类型",
        });
      },
      del(id) {
        this.$axios('/admin/category/del', {
          id: id
        }).then(res => {
          this.$Message.success('删除成功');
          this.getList();
        })
      },
      getCategoryArr() {
        this.$axios('/admin/category/getCategoryArr', {}).then(res => {
          console.log(res);
          this.deptList = res
        })
      },

      normalizer(node) {
        console.log(node, "node");
        return {
          id: node.id,
          label: node.title,
          children: node.children,
        };
      },
    },
    created() {
      // 查询自己管理员
      this.getList();
    },

    mounted() {
      getTreeSelectData().then(res => {
        const { data } = res
        this.deptList = data.data
      })
    },
  }
</script>

<style>
  .inputMaxWidth {
    max-width: 180px;
    margin-left: 10px;
  }
</style>
